<template>
<div class="body">
  <div class="main">
    <el-row>
            <el-col :span="24" >
              <el-divider></el-divider>
                <el-card :body-style="{ padding: '20px'}" class="block" >
                <el-container>
                  <el-aside class="EAside">
                    <el-container>
                      <el-header height="200px">
                        <div style="border: 2px solid #269;height:200px;width:230px;box-shadow: 0 15px 12px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
                        <img :src="exppicurl" class="image">
                        </div>
                      </el-header>
                
                      <el-footer style="text-align: left; font-size: 16px">
                        <el-divider class="divider-1"></el-divider>
          
                        <el-col :span="24">
                        <span >邮箱：{{expmail}}</span>
                        </el-col>
                
                      </el-footer>
            
                    </el-container>
                  </el-aside>
                    <el-main class="EMain">
                      <el-container>
                        <el-header style="margin-right:15%" height="50px">
                          <el-row >
                            <el-col :span="24"><div ></div><span ><h2>{{expname}}</h2></span></el-col>
                          </el-row>
                        </el-header>
                        <el-main style="text-align: left; font-size: 15px;color:#606266"> 
                          <el-col :span="24"><div class="text-st"></div><span class="tt">身份：</span>{{expident}}</el-col>
                          <el-col :span="24"><div class="text-st"></div><span class="tt">领域：</span>{{expfield}}</el-col>
                          <el-col :span="24"><div class="text-st"></div><span class="tt">行业：</span>{{expindu}}</el-col>
                          <el-col :span="24"><div class="text-st"></div><span class="tt">服务意愿：</span>{{expserve}}</el-col>
                        </el-main>
                      </el-container>
                    </el-main>
                </el-container>
                </el-card>
                </el-col>
                
                </el-row>
              <el-row class="botblock">
              <el-col :span="24">
                <el-card :body-style="{ padding: '5px'}" class="block-2" >
                    <el-container>
                      <el-header style="text-align: left;" class="el-head">
                        <el-row >
                          <el-col :span="24"><span ><h2><i class="el-icon-s-custom"></i>  专家简介</h2></span></el-col>
                        </el-row>
                      </el-header>
                      
                      <el-footer style="font-size:14px;color:#606266" >
                        <el-divider class="divider-1"></el-divider>
                          <el-col :span="24" style="text-align:left"><span style="white-space:normal">{{expinfo}}</span></el-col>
                          
                      </el-footer>
                    </el-container> 
                </el-card>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="24">
                <!-- <div class="grid-content bg-purple-light">asd</div> -->
                <el-card :body-style="{ padding: '5px'}" class="block-3" >
                  <el-container>
                    <el-header style="text-align: left" class="el-head">
                      <el-row >
                        <el-col :span="24"><span ><h2><i class="el-icon-trophy"></i> 成果精选</h2></span></el-col>
                      </el-row>
                    </el-header>
                    <el-main style="height:400px;font-size:14px;color:#606266">
                      <el-divider class="divider-1"></el-divider>
                        <el-col :span="24" style="text-align:left"><span style="white-space:normal">{{expach}}</span></el-col>
                    </el-main>
                    <el-footer >
                      <el-divider content-position="left"><h3>成果累计</h3></el-divider>
                      <svg-icon icon-class='s1' className='s1' style="width: 60px;height: 60px;"></svg-icon>
                      <h4>30{{expcount}}项</h4>
                      <!-- <div style="border-bottom: 3px solid skyblue;width:90px"></div> -->
                    </el-footer>
                  </el-container> 
                </el-card>
              </el-col>
            </el-row>
  </div>
</div>
</template>

<script>
import SandTAchievements from "../SandTAchievements.vue"
export default {
  name: 'Expdetail',
  
  data () {
    return {
      expname:this.$route.query.expname,
      exptype:this.$route.query.exptype,
      expfield:this.$route.query.expfield,
      expindu:this.$route.query.expindu,
      exppicurl:this.$route.query.exppicurl,
      expident:this.$route.query.expident,
      expmail:this.$route.query.expmail,
      expinfo:this.$route.query.expinfo,
      expach:this.$route.query.expach,
      expcount:this.$route.query.expcount,
      expserve:this.$route.query.expserve,
    }
  },
  created(){
    console.log(this.$route.query)
  }
}
</script>

<style scoped>
  .tt{
    font-size:16px;
    color:#303133;
  }
  .body{
    width: 100%;
    background-color: rgb(243, 245, 245);
  }
  .divider-1{
    width: 120px;
  }
  .image-2{
    margin-left: auto;
      margin-right: auto;
      /* margin-top: 5%; */
      width: 810px;
      height: 180px;
      
  }
  .botblock{
    width: 820px;
    margin-left:auto;
    margin-right: auto;
    margin-bottom: 1%;
  }
  .main{
    width: 1180px;
    margin-left:auto;
    margin-right: auto;
  }
  .text-st{
    margin-bottom: 23px;
  }
  .el-head {
    background-color: #DCDFE6;
    color: #333;
    line-height:10px;
  }
  /* .el-row{
    margin-bottom: 10px;
  } */
  .Pmain{
    height: 30px;
  }
  
  .block{
      margin-left: auto;
      margin-right: auto;
      margin-top: 1%;
      width: 810px;
      height: 310px;
      /* border: 1px solid rgb(143, 145, 145); */
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      
  }
  .block-2{
      margin-left: auto;
      margin-right: auto;
      margin-top: 1%;
      width: 810px;
      height: 350px;
  }
  .block-3{
      margin-left: auto;
      margin-right: auto;
      width: 810px;
      height: 620px;
    margin-bottom: 2%;
    /* border: 1px solid rgb(143, 145, 145); */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .image {
    width: 200px;
    display: block;
  }
  .EAside{
    height: 400px;
  }
  /* .EMain{
    width:60%;
    display: block;
  } */
  .card-p{
    margin-right: 0px;
  }
  
</style>

